<template>
	<view>
		<view class="bank_card">
			<view class="fixCls" style="height: 70rpx;">
				<text>输入银行卡</text>
			</view>
			<view class="fixCls" style="height: 70rpx;">
				<van-row type="flex">
					<van-col span="6"><text>卡类型</text></van-col>
					<van-col span="12">
						<picker @change="bindPickerChange" :value="index" :range="array">
							<view class="uni-input">{{array[index]}}</view>
						</picker>
					</van-col>
				</van-row>
			</view>
			<view class="fixCls" style="height: 70rpx;">
				<van-row type="flex" style="height: 50rpx;">
					<van-col span="6">
						<view style="margin-top: 9rpx;">请输入卡号</view>
					</van-col>
					<van-col span="12">
						<input type="number" :value="userInputCardNum" style="height: 50rpx;" placeholder="请输入请输入卡号"
							@input='bankcardInput' />
					</van-col>
				</van-row>
			</view>
			<view class="fixCls">
				<van-row type="flex">
					<van-col span="6">
						<view style="margin-right: 40rpx;">银行预留手机号</view>
					</van-col>
					<van-col span="12"><input type="number" :value="phoneNum" style="height: 70rpx;" @input="handleBlur"
							placeholder="请输入银行预留手机号" /></van-col>
				</van-row>
			</view>
			<view class="fixCls" style="border-bottom: 0;">
				<van-row type="flex">
					<van-col span="6">
						<view style="margin-top: 9rpx;">验证码</view>
					</van-col>
					<van-col span="8">
						<input type="number" :value="phoneCode" @input="handlePhoneCode" style="height: 50rpx;" placeholder="请输入验证码" />
					</van-col>
					<van-col span="6">
						<button
							style="position: relative;left: 80rpx;height: 70rpx;width: 180rpx;font-size: 30rpx;"
							:disabled="isSend1" @click="handleCode">{{codeName}}</button>
					</van-col>
				</van-row>
				<view style="margin-top: 10rpx;">
					<radio-group>
						<radio :value="radioValue" color="#2892FF" :checked="radioValue" @click="radioCheck"></radio>
						本人已阅读并同意签署<text @click="toArgee(0)" style="color: #2892FF;">《宝付协议认证支付服务协议》</text><text
							@click="toArgee1(bank_id)" style="color: #2892FF;" v-for="(item,index2) in argeeList"
							:key="index2">《{{item.name}}》</text>
					</radio-group>
				</view>
			</view>
		</view>
		<view class="" style="margin-top: 10rpx;">
			<button :class="radioValue?'btnCol':'btnCol1'" style="" @click="handleFished">完成绑卡</button>
		</view>
	</view>
</template>

<script>
	import {
		getBankList,
		getBankAgree,
		getBaofuAgree,
		readySign,
		confirmSign
	} from '@/api/bank'
	import {
		checkPhone
	} from "@/utils/validate";
	export default {
		data() {
			return {
				title: 'picker',
				array: ['请选择卡类型'],
				index: 0,
				bank_id: '',
				bankList: {},
				bank_id1: 0,
				userInputCardNum: '', // 银行卡账号
				phoneNum: '', //预留手机号
				cardNum: '',
				uniqueCode: '',
				phoneCode: '',
				codeName: '获取验证码',
				totalTime1: 60,
				isSend1: false, //禁用
				timer: '', //定时器
				argeeList: [],
				radioValue: false
			}
		},
		onLoad() {
			getBankList().then(res => {
				let arr = []
				this.bankList = res
				arr = Object.values(res)
				this.array = this.array.concat(arr)
			})
			// getBankAgree(this.bank_id).then(res=>{
			// })
		},
		methods: {
			radioCheck(e) {
				this.radioValue = !this.radioValue
			},
			handleBlur(e) {
				this.phoneNum = e.detail.value
			},
			handlePhoneCode(e){
				this.phoneCode=e.detail.value
			},
			handleClick() {
				this.showPicker = true
			},
			bindPickerChange(e) {
				let arr = []
				this.index = e.detail.value
				for (let item in this.bankList) {
					if (this.array[this.index] == this.bankList[item]) {
						this.bank_id = item
					}
				}
				this.getArrList()
			},
			getArrList() {
				let str = ''
				getBankAgree(this.bank_id).then(res => {
					this.argeeList = res
				})
			},
			toArgee1(e) {
				if (e == '') {
					uni.showToast({
						title: "请先选择卡类型",
						icon: 'error'
					})
				} else {
					uni.navigateTo({
						url: `/pagesB/bankArgee/bankArgee?id=${e}`
					})
				}
			},
			toArgee(e) {
				uni.navigateTo({
					url: `/pagesB/bankArgee/bankArgee?id=${e}`
				})
			},
			bankcardInput(e) {
				if (this.index == 0) {
					uni.showToast({
						title: "请先选择卡类型",
						icon: 'error'
					})
				} else {
					var card = e.detail.value;
					//输入时每四位一个空格
					var card = card.replace(/\s/g, '').replace(/[^\d]/g,
						'').replace(/(\d{4})(?=\d)/g, '$1 ');
					// 将处理后的值赋予到输入框
					this.userInputCardNum = card
					// 输入的卡号长度
					var len = card.length
					//判断用户是输入还是回删
					if (len > this.cardlen) {
						//用户输入
						if ((len + 1) % 5 == 0) {
							card = card + ' '
							console.log(card);
						}
					} else {
						//用户回删
						card = card.replace(/(^\s*)|(\s*$)/g, "")
					}
					// 将处理后的值赋予到输入框
					this.userInputCardNum = card
					this.cardlen = len
					//将每次用户输入的卡号长度赋予到长度中转站
					// 格式化字符串的空格
					let cardNum = this.userInputCardNum.replace(/\s*/g, "");
					this.cardNum = cardNum;
				}
			},
			handleCode() {
				let data = {
					cardNumber: this.cardNum,
					mobile: this.phoneNum,
					bank: this.array[this.index]
				}
				if (!checkPhone(data.mobile)) {
					return
				}
				console.log(data);
				readySign(data).then(res => {
					this.uniqueCode = res[0]
					console.log(res);
				})
				this.isSend1 = true
				this.codeName = this.totalTime1 + 's后重新发送'
				this.timer1 = setInterval(() => {
					this.totalTime1--
					this.codeName = this.totalTime1 + 's后重新发送'
					if (this.totalTime1 < 0) {
						clearInterval(this.timer1)
						this.codeName = '重新发送验证码'
						this.totalTime1 = 60
						this.isSend1 = false
					}
				}, 1000)
			},
			handleFished() {
				if (this.radioValue == true) {
					let data = {
						code: this.phoneCode,
						uniqueCode: this.uniqueCode
					}
					confirmSign(data).then(res => {
						uni.showToast({
							title: '绑卡成功',
							icon: 'success'
						})
						uni.navigateTo({
							url: '/pagesB/bankCard/bankCard'
						})
					})
				} else {
					uni.showToast({
						title: '请先阅读协议',
						icon: 'error'
					})
				}
			}
		}
	}
</script>

<style>
	.bank_card {
		width: 90%;
		margin: 0 auto;
		/* height: 600rpx; */
		border-radius: 15rpx;
		background-color: #fff;
		padding: 20rpx;
		padding-top: 0;
		margin-top: 20rpx;
	}

	.fixCls {
		padding: 15rpx;
		border-bottom: 0.5rpx solid #e8e8e8;
	}

	.btnCol {
		color: #FFF;
		border: 1rpx solid #f7f7f7;
		width: 95%;
		padding: 5rpx;
		background-color: #2892FF;
	}

	.btnCol1 {
		color: #3c3c3c;
		width: 95%;
		padding: 5rpx;
		background-color: #fff;
		border: 1rpx solid #f7f7f7;
	}
</style>